<template>
    <header>
        <nav>
            <h1>组合数据</h1>
            <h1 class="logo">No2</h1>
            <p>{{ a }}</p>
            <p>{{ b }}</p>
            <p>{{ c }}</p>
            <button @click="d++">按钮++</button>
            <p>{{ d }}</p>

            <h2>{{ e }}</h2>
            <input type="text"  v-model="e" >

            <h2>{{ f }}</h2>
            <input type="text"  v-model="f" >
        </nav>


    </header>
</template>
<script lang="ts">
    export default {
        name: "No2",
        //组合数据
        setup() {
            const a: number = 10;
            const b: number = 20;
            const c: number = 30;
            let d = 0;

            let e:string = "hello world";
            const f:string = "hello world";

            
            return {
               a,b,c,d,e,f
            }
        }

    }


</script>
<style>
.logo {
    font-size: 24px;
    /* font-weight: bold; */
    color: #744747;
    text-align: center;
    margin-top: 20px;
    }
*
{
    /* color: #ff0000; */
    font-size: 20px;
}

</style>